<!DOCTYPE html>
<html lang="zh">
<head th:replace="/admin/fragments/common :: head('菜品管理')">
    <title></title>
</head>
<style>
    label {
        display: none;
    }
    .hidden{
        display: none;
    }
</style>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary app-loaded sidebar-open"
      onload="getFoodDetail()">
<div class="app-wrapper">
    <main class="app-main">
        <div th:replace="/admin/fragments/common :: appContentHeader('菜单管理')"></div>
        <div class="app-content">
            <div class="container-fluid">
                <div class="card card-primary card-outline mb-4"> <!--begin::Header-->
                    <div class="card-header">
                        <div class="card-title" id="foodTitle"></div>
                    </div> <!--end::Header-->
                    <!--begin::Form-->
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="food_foodname">菜品名称</label>
                            <input type="text" class="form-control" id="food_foodname" name="foodname" placeholder="菜品名称">
                        </div>
                        <div class="mb-3">
                            <label for="food_foodname">图片</label>
                            <img id="food_img" alt="" src="" style="width: 100px">
                            <label class="btn btn-info" for="photo"><i class="bi bi-upload"></i></label>
                            <input type="file" class="form-control" id="photo" style="display: none" onchange="uploadfile()">
                        </div>
                        <div class="mb-3">
                            <input type="hidden" id="food_id" name="id">
                            <label for="food_price">价格</label>
                            <input type="text" class="form-control" id="food_price" name="price" placeholder="价格">
                        </div>
                        <div class="mb-3">
                            <a href="javascript:void(0)" onclick="history.back()" class="btn btn-warning">返回</a>
                            <input type="button" value="保存修改" class="btn btn-primary" onclick="updatefood()">
                            <div class="alert alert-success hidden" role="alert" id="showSuccess" style="margin-top: 5px;width:200px">
                                更新成功
                            </div>
                        </div>
                    </div>
                    <!--end::Form-->
                </div>
            </div>
        </div>
    </main>

    <script>
        function getFoodDetail(){
            const searchParams = new URLSearchParams(window.location.search);
            const oid = searchParams.get('id');
            axios.get("/api/admin/foodManage", {
                params: {
                    id: oid
                }
            }).then(res=>{
                const food = res.data;
                console.log(food)
                document.getElementById("foodTitle").innerText = food.name+" 详情"
                document.getElementById("food_foodname").value = food.foodname;
                document.getElementById("food_img").src = food.photo;
                document.getElementById("food_price").value = food.price;
            })
        }

        function updatefood(){
            console.log('更新数据');
            $("#showSuccess").addClass("hidden");
            const foodname = document.getElementById("food_foodname").value;
            const photo = document.getElementById("food_img").src;
            const price = document.getElementById("food_price").value;
            const dataToUpdate = {
                foodname: foodname,
                photo: photo,
                price: price
            }
            axios.post("/api/admin/food/update", dataToUpdate)
                .then(res=>{
                    if(res.data === 'ok'){
                        // alert('更新成功')
                        $("#showSuccess").removeClass("hidden");
                    }
                })
        }
        function uploadfile(){
            const file = document.getElementById("photo").files[0];
            const formData = new FormData();
            formData.append('file', file);

            axios.post("/api/admin/file/upload", formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res=>{
                console.log(res.data);
                if(res.data.code===200){
                    document.getElementById("food_img").src=res.data.data;
                }
            })
        }

    </script>
</div>
</body>
</html>